import React, { Component } from 'react';
import avatorURL from '../../../../../images/profile photo.jpg'

class PersonDetailShow extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isMouse: false
        }
    }

    handleMouseOver = () => {
        this.setState({
            isMouse: true
        });
    }

    handleMouseOut = () => {
        this.setState({
            isMouse: false
        });
    }

    handleClick = () => {
        this.props.cancelShowDetail();
    }

    render() {
        return (
            <div style={{
                width: 300,
                height: 600,
                position: 'fixed',
                top: '60%',
                marginTop: -300,
                left: '50%',
                marginLeft: -150,
                zIndex: 200
            }}>
                <div style={{
                    backgroundColor: '#fff',
                    width: 300,
                    height: 450,
                    borderRadius: 20,
                    position: 'relative'
                }}>
                    <div style={{
                        position: 'absolute',
                        top: 10,
                        right: 10,
                        cursor: 'pointer',
                        backgroundColor: (this.state.isMouse ? '#f00' : 'transparent')
                    }} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
                        <span
                            className="anticoncha"
                            style={{
                                fontSize: 20
                            }} onClick={this.handleClick}
                        ></span>
                    </div>
                    <img src={avatorURL} alt="头像" style={{
                        width: 200,
                        height: 200,
                        borderRadius: '50%',
                        marginLeft: 50,
                        border: '2px solid #f00',
                        position: 'absolute',
                        top: -100
                    }} />
                    <div style={{
                        paddingTop: 110,
                        textAlign: 'center',
                        fontWeight: 'bold',
                        fontSize: 40
                    }}>{this.props.item.realName}</div>
                    <div style={{
                        textAlign: 'center',
                        fontSize: 20,
                        color: '#ccc'
                    }}>
                        <span>类别：</span>
                        {this.props.item.type}
                    </div>
                    <div style={{
                        textAlign: 'center',
                        fontSize: 20,
                        color: '#ccc'
                    }}>
                        <span>年份：</span>
                        {this.props.item.year}
                    </div>
                    <div style={{
                        textAlign: 'center',
                        fontSize: 18,
                        paddingTop: 50
                    }}>
                        {this.props.item.motto}
                    </div>
                </div>
            </div>
        );
    }
}

export default PersonDetailShow;